import {
  type FC,
  type PropsWithChildren,
  memo,
  useLayoutEffect,
  useRef,
  useState,
} from "react";
import { useContext } from "react";
import classNames from "classnames";
import { Option } from "rc-select";
import styles from "./index.module.scss";
import { Context } from "./index";
import Select from "@/app/components/Select";
import { useContentStore, useServerStore } from "@/store";
import Loading from "@/app/components/Loading";
import Icon, { svgMap } from "@/cvcomponents/Icon";

interface IndexProps {
  onIconChange?: (v: string) => void;
  onTitleChange?: (v: string) => void;
  iconKey?: keyof typeof svgMap;
  type: Sections;
}

const Index: FC<PropsWithChildren<IndexProps>> = ({ type }) => {
  const { onOpenChange, isOpen } = useContext(Context);
  const { content, updateSection } = useContentStore(
    (state) => state,
    (o, n) => {
      return o.content[type] === n.content[type];
    }
  );
  const { editSectionName } = useServerStore();
  const data = content[type];
  const iconKey = data.iconKey;
  const displayName = data.displayName;
  const [showBtn, setShowBtn] = useState(false);
  const [loading, setLoading] = useState(false);
  const initTitle = useRef("");
  const initIconKey = useRef("");
  useLayoutEffect(() => {
    initTitle.current = displayName;
    initIconKey.current = iconKey;
  }, []);
  useLayoutEffect(() => {
    setShowBtn(
      displayName !== initTitle.current || iconKey !== initIconKey.current
    );
  }, [displayName, iconKey]);

  const renderHead = () => {
    if (isOpen) {
      return (
        <div
          style={{ display: "flex", alignItems: "center", gap: "4px", flex: 1 }}
        >
          <Select
            style={{ width: "70px" }}
            value={iconKey}
            onChange={(e) => {
              // onIconChange?.(e || '')
              updateSection({ ...data, iconKey: e || "" }, type);
            }}
          >
            {Object.keys(svgMap).map((icon: any) => {
              return (
                <Option key={icon} value={icon}>
                  <Icon name={icon}></Icon>
                </Option>
              );
            })}
          </Select>
          <input
            className={styles.input}
            value={displayName as string}
            onChange={(e) => {
              // onTitleChange?.(e.target.value)
              updateSection({ ...data, displayName: e.target.value }, type);
            }}
            type="text"
          />
          {showBtn && data?.id ? (
            <div
              className={classNames(styles.submitBtn, {
                [styles.forbid]: displayName.length === 0,
              })}
              onClick={async () => {
                if (displayName.length !== 0 && !loading) {
                  if (data?.id) {
                    const res = await editSectionName(data);
                    if (res?.code === 200) {
                      initTitle.current = displayName;
                      initIconKey.current = iconKey;
                      setShowBtn(false);
                    }
                    setLoading(false);
                  }
                }
              }}
            >
              {loading ? (
                <Loading style={{ width: "20px" }} />
              ) : (
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  style={{ width: "20px" }}
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
                </svg>
              )}
            </div>
          ) : null}
        </div>
      );
    } else {
      return (
        <div
          style={{
            display: "flex",
            gap: "4px",
            alignItems: "center",
            flex: "1",
          }}
          onClick={() => {
            onOpenChange?.(!isOpen);
          }}
        >
          <Icon name={iconKey}></Icon>
          {displayName}
        </div>
      );
    }
  };
  return (
    <div className={classNames(styles.head, { [styles.open]: isOpen })}>
      {renderHead()}
      <div
        className={styles.arrow}
        onClick={() => {
          onOpenChange?.(!isOpen);
        }}
      >
        <svg
          style={{ width: "22px" }}
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
        >
          <path d="M0 0h24v24H0V0z" fill="none"></path>
          <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path>
        </svg>
      </div>
    </div>
  );
};

export default memo(Index, () => {
  return true;
});
